<template>
  <aside class="menu" :class="{ 'menu-fold': !isMenuFold }">
    <vue-scroll :ops="scrollOps">
      <!-- <h5><i class="circle"></i><span>动态资讯</span></h5> -->
      <ul class="menu-list">
        <!-- <li
          v-for="(item, index) in menuList"
          :key="index"
          :title="item.name"
          :class="{ active: curType === item.name }"
          @click="handleChangeType(item)"
        >
          <div
            :class="['logo', 'iconfont', item.icon]"
            :style="item.style"
          ></div>
          <span>{{ item.name }}</span>
        </li> -->
        <template v-for="(item, index) in menuList">
          <li
            v-if="item.id != 'zdyzt'"
            :key="index"
            :title="item.name"
            :class="{ active: curType === item.name }"
            @click="handleChangeType(item, index)"
          >
            <div
              :class="['logo', 'iconfont', item.icon]"
              :style="item.style"
            ></div>
            <span>{{ item.name }}</span>
          </li>
          <!-- <el-popover
            v-if="item.id == 'zdyzt'"
            :key="item.id"
            ref="popover"
            placement="right-start"
            trigger="hover"
          >
            <div class="popCon">
              <div
                class="pc-item"
                v-for="citem in specialList"
                :key="citem.esId"
              >
                <p @click="rewriteItem(item, citem)">{{ citem.name }}</p>
                <i class="el-icon-close" @click="deleteCon(citem)"></i>
              </div>
            </div>
          </el-popover> -->
          <li
            v-if="item.id == 'zdyzt'"
            v-popover:popover
            :key="index"
            :title="item.name"
            :class="{ active: curType === item.name }"
          >
            <div
              :class="['logo', 'iconfont', item.icon]"
              :style="item.style"
            ></div>
            <span>{{ item.name }}</span>
          </li>
        </template>
      </ul>
    </vue-scroll>
  </aside>
</template>
<script>
export default {
  props: {
    number: {
      type: Number,
      default: 1,
    },
  },
  components: {},
  data() {
    return {
      menuList: [],
      isMenuFold: false, //菜单折叠
      curType: "",
      scrollOps: {
        vuescroll: {
          mode: "native",
        },
        scrollPanel: {
          initialScrollX: false,
          initialScrollY: false,
          scrollingX: false,
          scrollingY: true,
        },
        rail: {
          background: "rgba(255,255,255,.1)",
          gutterOfEnds: "10px",
        },
        bar: {
          background: "#eee",
          size: "5px",
        },
      },
      specialList: [],
    };
  },
  watch: {
    // 确定检索成功后，需要视情况刷新自定义专题列表
    number: {
      handler() {
        setTimeout(() => {
          // this.querySpecial();
        }, 200);
      },
    },
  },
  mounted() {
    this.init();
    // this.querySpecial();
    this.$Bus.$on("gotoMore", (val) => {
      let menu = this.menuList.find((menu) => val.title == menu.name);
      // console.log(menu);
      if (menu) {
        this.curType = val.title;
        this.$emit("getAsideType", menu);
      } else if (val.type == "gx") {
        // this.curType = val.title;
        this.curType = "动态资讯";
        this.$emit("getAsideType", {
          id: "gxtj",
          name: "个性推荐",
          icon: "icon-zixun1",
          href: "",
        });
      }
    });
  },
  methods: {
    init() {
      this.$post(this.$Url.consultModule.dynamicColumn).then((res) => {
        let result = (res.data && res.data.result) || [];
        result.forEach((v) => {
          v.icon = "icon-zixun1";
        });
        // result.unshift({
        //   id: "gxtj",
        //   name: "个性推荐",
        //   icon: "icon-zixun1",
        //   href: "",
        // });
        result.unshift({
          id: "dtzx",
          name: "动态资讯",
          icon: "icon-zixun2",
          href: "",
        });
        result.push(
          // {
          //   id: "zdyzt",
          //   name: "自定义专题",
          //   icon: "icon-zixun3",
          //   href: "",
          // },
          {
            id: "mryw",
            name: "每日科情",
            icon: "icon-zixun1",
            href: "http://122.225.200.4:18020/gd-client/archives/news",
          }
        );
        this.menuList = result;
        let query = this.$route.query;
        // console.log("query", query);
        if (query) {
          // if (query.keyword) {
          //   this.opts.searchTxt = query.keyword;
          // }
          let type = query.type || 0;
          this.curType = this.menuList[Number(type)].name;
          this.$emit("getAsideType", this.menuList[Number(type)]);
        }
      });
      // this.menuList = [
      //   {name: '科技资讯',id:1, icon: 'icon-zixun3'},
      //   {name: '行业资讯',id:2,icon: 'icon-zixun3',},
      //   {name: '国外资讯',id:3,icon: 'icon-zixun3'},
      //   {name: '市场资讯',id:4,icon: 'icon-zixun3'},
      //   {name: '新媒体推文',id:5,icon: 'icon-zixun3'},
      //   {name: '课题申报',id:5,icon: 'icon-zixun3'},
      //   // {name: '科技资讯',id:1, icon: 'icon-zixun2'},
      //   // {name: '行业资讯',id:2,icon: 'icon-zixun1', style:'padding-top:.01rem;font-size:.37rem;'},
      //   // {name: '国外资讯',id:3,icon: 'icon-zixun'},
      //   // {name: '市场资讯',id:4,icon: 'icon-zixun3'},
      //   // {name: '新媒体推文',id:5,icon: 'icon-24gf-newspapers2'},
      //   // {name: '每日要闻',id:-1,icon: 'icon-xinwen', style:'font-size:.29rem', href: 'http://122.225.200.4:18020/gd-client/archives/news'},
      // ];
    },
    querySpecial() {
      let param = {
        ipi: 1,
        ips: 50,
      };
      this.$post(this.$Url.consultModule.querySpecialColumn, param).then(
        (res) => {
          let data = res.data.result;
          if (data.length) this.specialList = data;
        }
      );
    },
    handleChangeType(item, index) {
      if (item.href) {
        window.open(item.href, "_blank");
        return;
      }
      this.curType = item.name;
      this.$emit("getAsideType", item);
      this.$router.push({
        name: "Consult",
        query: {
          type: index,
        },
      });
    },
    // 点击--回写组合检索相关数据
    rewriteItem(item, info) {
      let jitem = JSON.parse(JSON.stringify(item));
      // 点击自定义专题是重写参数
      this.$set(jitem, "name", "个性推荐");
      this.$emit("getAsideType", jitem);
      this.$emit("rewriteEvent", info);
    },
    deleteCon(info) {
      let content = `您确定删除[${info.name}]吗？`;
      this.$confirm(content, "删除提醒", {
        confirmButtonText: "删除",
        closeOnClickModal: false,
      }).then(() => {
        let param = {
          columnEsId: info.esId,
        };
        this.$delete(this.$Url.consultModule.deleteSpecialColumn, param).then(
          (res) => {
            this.$message("删除成功！");
            // this.querySpecial();
          }
        );
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.menu {
  position: fixed;
  top: 0.7rem;
  left: 0;
  z-index: 3;
  width: 13%;
  height: calc(100vh - 0.7rem);
  padding-top: 0.16rem;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  background-color: $color2;
  overflow-x: hidden;
  overflow-y: auto;
  transition: all 0.2s linear;
  // 展开
  // &:hover
  &.menu-fold {
    width: 13%;
    h5 {
      .circle,
      span {
        display: inline-block;
      }
    }
    .menu-list {
      li {
        padding: 0 0.18rem 0 0.66rem;
        .logo {
          position: absolute;
          top: 50%;
          left: 0.15rem;
          margin-top: -0.18rem;
        }
        span {
          display: inline-block;
        }
      }
    }
  }
  h5 {
    width: 2rem;
    height: 0.4rem;
    line-height: 0.4rem;
    margin-bottom: 0.1rem;
    // font-family: SourceHanSansCN-Bold;
    font-size: 0.14rem;
    font-weight: normal;
    text-align: center;
    text-indent: -0.09rem;
    color: $color47;
    .circle {
      position: relative;
      display: none;
      width: 0.16rem;
      height: 0.1rem;
      margin-right: 0.18rem;
      vertical-align: middle;
      &:before {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 2;
        width: 0.1rem;
        height: 0.1rem;
        border-radius: 50%;
        background-color: $mainColor;
        content: "";
      }
      &:after {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 1;
        width: 0.1rem;
        height: 0.1rem;
        border-radius: 50%;
        background-color: $color48;
        content: "";
      }
    }
    span {
      display: none;
      vertical-align: middle;
    }
  }
  .menu-list {
    position: relative;
    padding: 0 0.18rem;
    li {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 0.72rem;
      line-height: 0.72rem;
      // padding: 0 .18rem 0 .66rem;
      padding: 0 0.15rem;
      margin-bottom: 0.14rem;
      cursor: pointer;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      transition: all 0.2s ease;
      &:nth-of-type(1) {
        .logo {
          font-size: 0.2rem;
        }
      }
      &:last-of-type {
        margin-bottom: 0.1rem;
      }
      &:hover {
        border-radius: 8px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        background-color: $color2;
      }
      &.active {
        border-radius: 8px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        background-color: $color2;
        .logo {
          color: $color68;
          background-color: $mainColor;
        }
        span {
          &:nth-of-type(1),
          &:nth-of-type(2) {
            color: $mainColor;
          }
        }
      }
      .logo {
        position: relative;
        top: auto;
        left: 0;
        margin-top: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 0.32rem;
        height: 0.32rem;
        border-radius: 8px;
        // margin-top: -.18rem;
        font-size: 0.24rem;
        color: $mainColor;
        background-color: $hoverColor;
      }
      span {
        display: none;
        &:nth-of-type(1) {
          width: 0.4rem;
          // font-family: SourceHanSansCN-Medium;
          font-weight: normal;
          font-size: 0.14rem;
          color: $color69;
        }
        &:nth-of-type(2) {
          width: calc(100% - 0.36rem - 0.15rem - 0.36rem);
          font-size: 0.14rem;
          text-align: right;
          color: $color70;
        }
      }
    }
  }
  .menu-icon-box {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 0.4rem;
    i {
      font-size: 0.24rem;
      color: $color5;
      cursor: pointer;
    }
  }
}
.popCon {
  .pc-item {
    display: flex;
    cursor: pointer;
    & + .pc-item {
      margin-top: 15px;
    }

    &:hover {
      p {
        font-weight: bold;
        color: $mainColor;
      }
      .el-icon-close {
        color: $mainColor;
      }
    }
    p {
      flex: 1;
    }

    .el-icon-close {
      margin-left: 5px;
      font-size: 18px;
    }
  }
}
</style>
